<template>
  <div>
    <div class="right">
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="探访主题">
            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="主持人">
            <el-input v-model="searchForm.host" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="报告时间">
            <el-date-picker v-model="searchForm.reportTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="探访时间">
            <el-date-picker v-model="searchForm.visitTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="newVisit">新建探访</el-button>
      <el-table :data="filteredData" style="width: 100%">
        <el-table-column prop="caseStdTopic" label="探讨主题"></el-table-column>
        <el-table-column prop="caseStdNum" label="参加人数"></el-table-column>
        <el-table-column prop="formattedStartTime" label="探讨开始时间"></el-table-column>
        <el-table-column prop="formattedReStartTime" label="报告开始时间"></el-table-column>
        <el-table-column prop="formattedReEndTime" label="报告结束时间"></el-table-column>
        <el-table-column prop="caseStdPcAmount" label="参考费用"></el-table-column>
        <el-table-column prop="caseStdCompere" label="主持人"></el-table-column>
        <el-table-column prop="caseStdGuests" label="参考主持人"></el-table-column>
        <el-table-column prop="caseStdState" label="探访状态">
          <template v-slot="scope">
            {{ scope.row.caseStdState === 1 ? '取消' : scope.row.caseStdState === 2 ? '正常' : '未知状态' }}
          </template>
        </el-table-column>
        <el-table-column prop="formattedCaTime" label="取消时间"></el-table-column>
        <el-table-column prop="formattedEndTime" label="结束时间"></el-table-column>
        <el-table-column prop="caseStdCaReason" label="取消理由"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template v-slot="scope">
            <el-button @click="viewDetail(scope.row)" type="text">查看</el-button>
            <el-button @click="editVisit(scope.row)" type="text">修改</el-button>
            <el-button @click="viewdelete(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        :page-size="5"
        class="pagination"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchForm: {
        name: '',
        host: ''
      },
      tableData: [],
      filteredData: [],
      total: 0,
      currentPage: 1
    };
  },
  created() {
    this.fetchData(this.currentPage); // 在创建组件时加载当前页数据
  },
  methods: {
    fetchData(page) {
      axios.get('http://localhost:8080/caseStd/page', {
        params: {
          page,
          pageSize: 7,  // 每页显示的条目数
          ...this.searchForm
        }
      }).then(response => {
        const { records, total } = response.data;
        const data = records.map(item => ({
          ...item,
          formattedStartTime: this.formatDate(item.caseStdStartTime),
          formattedReStartTime: this.formatDate(item.caseStdReStartTime),
          formattedReEndTime: this.formatDate(item.caseStdReEndTime),
          formattedCaTime: this.formatDate(item.caseStdCaTime),
          formattedEndTime: this.formatDate(item.caseStdEndTime)
        }));
        this.tableData = data;
        this.filteredData = data; // 初始化过滤后的数据
        this.total = total;  // 更新总记录数
      }).catch(error => {
        console.error("There was an error fetching the case study data:", error);
      });
    },
    formatDate(dateString) {
      const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
      return new Date(dateString).toLocaleDateString(undefined, options);
    },
    search() {
      this.filteredData = this.tableData.filter(item => {
        return (!this.searchForm.name || item.caseStdTopic.includes(this.searchForm.name)) &&
               (!this.searchForm.host || item.caseStdCompere.includes(this.searchForm.host));
      });
      this.total = this.filteredData.length;
    },
    resetForm() {
      this.searchForm = {
        name: '',
        host: ''
      };
      this.filteredData = this.tableData; // 重置过滤后的数据
      this.total = this.tableData.length; // 使用所有数据的长度
    },
    newVisit() {
      this.$router.push({ name: 'addlist' });
    },
    viewDetail(row) {
      this.$router.push({ name: 'select', params: { id: row.caseStdId } });
    },
    editVisit(row) {
      this.$router.push({ name: 'update', params: { id: row.caseStdId } });
    },
    viewdelete(row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:8080/caseStd/${row.caseStdId}`)
          .then(response => {
            // 删除成功，更新页面数据
            this.fetchData(this.currentPage);
            this.$message.success('删除成功');
          })
          .catch(error => {
            console.error('删除失败', error);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    handleCurrentChange(page) {
      console.log('Current page changed to:', page);
      this.currentPage = page;
      this.fetchData(page);
    }
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
.pagination {
  margin-left: 500px;
}
</style>
